<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>View Debts</title>
    <link rel="icon" type="image/png" href="{{ url_for('static', filename='phillfinance.png') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</head>
<body>
    <nav>
        <ul>
            <li><a href="{{ url_for('home') }}">Home</a></li>
            {% if current_user.is_authenticated %}
                <li><a href="{{ url_for('dashboard') }}">Dashboard</a></li>
                <li><a href="{{ url_for('logout') }}">Logout</a></li>
            {% else %}
                <li><a href="{{ url_for('login') }}">Login</a></li>
                <li><a href="{{ url_for('register') }}">Register</a></li>
            {% endif %}
        </ul>
    </nav>

    <div class="container">
        <h1>Your Debts</h1>
        {% with messages = get_flashed_messages(with_categories=True) %}
{% if messages %}
    <ul class="flashes">
        {% for category, message in messages %}
            <li class="flash {{ category }}">{{ message }}</li>
        {% endfor %}
    </ul>
{% endif %}
{% endwith %}

        <h3>Total Remaining Debt: ksh.{{ total_debt }}</h3>

        {% if debts %}
            <table>
                <thead>
                    <tr>
                        <th>Amount</th>
                        <th>Description</th>
                        <th>Date Added</th>
                        <th>Amount Paid</th>
                        <th>Remaining Debt</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    {% for debt in debts %}
                        <tr>
                            <td>ksh.{{ debt.amount }}</td>
                            <td>{{ debt.description }}</td>
                            <td>{{ debt.date_added.strftime('%Y-%m-%d') }}</td>
                            <td>ksh.{{ debt.amount_paid }}</td>
                            <td>ksh.{{ debt.amount - debt.amount_paid }}</td>
                            <td>
                                <!-- Form for Paying Debt -->
                                <form method="POST" action="{{ url_for('pay_debt', debt_id=debt.id) }}" class="pay-debt-form" style="display:inline;">
                                    <input class="cool-date-field" type="number" name="amount_paid" step="0.01" placeholder="Amount to Pay" required>
                                    <button type="submit" class="button">Pay</button>
                                </form> <br>

                                <!-- Link to Edit Debt -->
                                <a href="{{ url_for('edit_debt', debt_id=debt.id) }}" class="button fas fa-edit"></a>

                                <!-- Form to Delete Debt -->
                                <form method="POST" action="{{ url_for('delete_debt', debt_id=debt.id) }}" style="display:inline;">
                                    <button type="submit" class="buttons fas fa-trash-alt"></button>

                                </form>
                            </td>
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
        {% else %}
            <p>No debts to show.</p>
        {% endif %}

        <p><a href="{{ url_for('add_debt') }}" class="button">Add New Debt</a></p>
        <p><a href="{{ url_for('dashboard') }}" class="button">Back to Dashboard</a></p>
    </div>
</body>
</html>
